import 'package:flutter/material.dart';

import 'package:get/get.dart';
import 'package:xiaomi/app/modules/goodsDetail/views/goods_detail2_view.dart';
import 'package:xiaomi/app/modules/goodsDetail/views/goods_detail3_view.dart';
import 'package:xiaomi/app/modules/tools/screenAdapter.dart';

import '../controllers/goods_detail_controller.dart';
import 'goods_detail1_view.dart';

class GoodsDetailView extends GetView<GoodsDetailController> {
  const GoodsDetailView({super.key});

  Widget _getAppbar(BuildContext context) {
    return AppBar(
      backgroundColor: Color.fromRGBO(255, 255, 255, controller.opa.value),
      actions: [
        Container(
          margin: EdgeInsets.only(
              right: ScreenAdapter.width(20), bottom: ScreenAdapter.width(5)),
          height: ScreenAdapter.height(94),
          width: ScreenAdapter.width(94),
          child: ElevatedButton(
            onPressed: () {},
            style: const ButtonStyle(
              padding: WidgetStatePropertyAll(EdgeInsets.zero),
            ),
            child: const Icon(Icons.share),
          ),
        ),
        Container(
          margin: EdgeInsets.only(right: ScreenAdapter.width(20)),
          height: ScreenAdapter.height(100),
          width: ScreenAdapter.width(100),
          child: ElevatedButton(
            onPressed: () {
              showMenu(
                  context: context,
                  position: RelativeRect.fromLTRB(300, 60, 10, 0),
                  items: [
                    PopupMenuItem(child: Text('第一个')),
                    PopupMenuItem(child: Text('第2个')),
                    PopupMenuItem(child: Text('第3个')),
                  ]);
            },
            style: const ButtonStyle(
              padding: WidgetStatePropertyAll(EdgeInsets.zero),
            ),
            child: const Icon(Icons.more_horiz),
          ),
        )
      ],
      leadingWidth: ScreenAdapter.width(120),
      // toolbarHeight: ScreenAdapter.height(100),
      leading: Builder(builder: (context) {
        return Container(
          margin: EdgeInsets.only(left: ScreenAdapter.width(20)),
          height: ScreenAdapter.width(120),
          width: ScreenAdapter.height(120),
          child: ElevatedButton(
            onPressed: () {
              Get.back();
            },
            style: const ButtonStyle(
              shape: WidgetStatePropertyAll(CircleBorder()),
              padding: WidgetStatePropertyAll(EdgeInsets.zero),
            ),
            child: const Icon(Icons.arrow_back),
          ),
        );
      }),

      title: Container(
        width: ScreenAdapter.height(400),
        height: ScreenAdapter.height(100),
        child: Obx(() => controller.isHidden.value
            ? Text('')
            : Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: controller.titles.map((v) {
                  return InkWell(
                    onTap: () {
                      controller.setCurrentIndex(v['id']);
                      // var box = controller.k1.currentContext!
                      //     .findRenderObject() as RenderBox;
                      // print('高度  : ${box.size.height}');
                      var box1 = controller.k1.currentContext!
                          .findRenderObject() as RenderBox;
                      var box2 = controller.k2.currentContext!
                          .findRenderObject() as RenderBox;

                      if (v['id'] == 1) {
                        controller.scrollController.jumpTo(0.1);
                      } else if (v['id'] == 2) {
                        controller.scrollController.jumpTo(box1.size.height);
                      } else {
                        controller.scrollController.jumpTo(controller
                            .scrollController.position.maxScrollExtent);
                      }
                    },
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text(
                          v['title'],
                          style:
                              TextStyle(fontSize: ScreenAdapter.fontSize(32)),
                        ),
                        Container(
                          margin: const EdgeInsets.only(top: 2),
                          width: ScreenAdapter.width(60),
                          height: ScreenAdapter.height(5),
                          color: v['id'] == controller.currentIndex.value
                              ? Colors.red
                              : Colors.transparent,
                        )
                      ],
                    ),
                  );
                }).toList(),
              )),
      ),
      centerTitle: true,
    );
  }

  Widget _getList() {
    return SingleChildScrollView(
      padding: EdgeInsets.zero,
      controller: controller.scrollController,
      child: Column(children: [
        GoodsDetail1View(),
        GoodsDetail2View(),
        GoodsDetail3View(),
      ]),
    );
  }

  Widget _getBottom() {
    return Positioned(
        bottom: 0,
        right: 0,
        left: 0,
        // height: ScreenAdapter.height(120),
        child: Container(
          height: ScreenAdapter.height(160),
          decoration: BoxDecoration(
              color: Colors.white,
              border: Border(top: BorderSide(color: Colors.black54))),
          child: Row(
            children: [
              Expanded(
                  flex: 4,
                  child: Container(
                    // color: Colors.blue,
                    child: const Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                        Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [Icon(Icons.shopping_cart), Text('客服')],
                        ),
                        Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [Icon(Icons.shopping_cart), Text('收藏')],
                        ),
                        Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [Icon(Icons.shopping_cart), Text('购物车')],
                        ),
                      ],
                    ),
                  )),
              Expanded(
                  flex: 5,
                  child: Container(
                    // color: Colors.cyan,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        ElevatedButton(
                          onPressed: () {},
                          child: Text('加入购物车'),
                          style: ButtonStyle(
                            // padding: WidgetStatePropertyAll(
                            //     EdgeInsets.only(left: ScreenAdapter.width(1))),
                            backgroundColor:
                                WidgetStatePropertyAll(Colors.amber),
                          ),
                        ),
                        ElevatedButton(
                          onPressed: () {},
                          child: Text('立即购买'),
                          style: ButtonStyle(
                            // padding: WidgetStatePropertyAll(
                            //     EdgeInsets.only(right: ScreenAdapter.width(5))),
                            backgroundColor: WidgetStatePropertyAll(Colors.red),
                          ),
                        ),
                      ],
                    ),
                  )),
            ],
          ),
        ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: PreferredSize(
          preferredSize: Size.fromHeight(ScreenAdapter.height(120)),
          child: Obx(() => _getAppbar(context))),
      body: Stack(
        children: [_getList(), _getBottom(), Text('data')],
      ),
    );
  }
}

///这里实现appbar的两种实现方式
